<template>
    <el-card>
        <div v-loading="loading" >
            <div v-if="projectList.length" class="list">
                <el-table :data="projectList" style="width: 100%" stripe lazy highlight-current-row
                          @row-click.self="check" :row-key="row => row.id">
                    <el-table-column fixed type="index" label="序号" width="75px" align="center"/>
                    <el-table-column prop="types" label="类型" width="120px" align="center"/>
                    <el-table-column prop="name" label="名称" min-width="200px" align="center"/>
                    <el-table-column prop="grade" label="立项等级" width="120px" align="center" sortable>
                        <template #default="{row}">
                            <el-tag>{{ GRADE[row.grade] }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100px" align="center" sortable>
                        <template #default="{row}">
                            <el-tag :type="STATUS[row.status].type">{{ STATUS[row.status].name }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reimbursementLimit" label="报销额度" width="120px" align="center" sortable/>
                    <el-table-column prop="startTime" :formatter="formattedDate" label="发布日期" width="120px" sortable  align="center"/>
                    <el-table-column label="操作" fixed="right" width="200px" align="center">
                        <template #default="{row}">
                            <el-button type="success" size="small" @click.native.stop="upOkProject(row)" :disabled="row.status!==1">审核通过</el-button>
                            <el-button type="danger" size="small" @click.native.stop="upNoProject(row)" :disabled="row.status!==1">审核驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-empty v-else :image-size="200"/>
        </div>
        <Pagination :total="total" v-model:currentPage="currentPage" v-model:pageSize="pageSize"
                    v-model:projectList="projectList" v-model:loading="loading"/>
    </el-card>
</template>

<script setup>
import {onMounted, ref} from 'vue'

import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user";
//分页
import Pagination from "@/views/User/InvolveProject/components/Pagination.vue"
//api接口
import {getProjectListByHostApi, upNoProjectApi, upOkProjectApi} from "@/apis/project";
import {getProjectGrade, getProjectStatus} from "@/apis/enum";

const router = useRouter()

const userStore = useUserStore()
//常量
const STATUS = getProjectStatus()
const GRADE = getProjectGrade()
//项目列表
let loading = ref(true)
let projectList = ref([])

//分页信息
let total = ref(0)
let currentPage = ref(1)
let pageSize = ref(10)

//获取第一指导项目列表数据
const getHostProjectList = () => {
    getProjectListByHostApi(currentPage.value,pageSize.value).then(
        res => {
            projectList.value = res.data.records
            total.value = res.data.total
            loading.value = false
        }
    )
}
const check = row => {
    const {href} = router.resolve({
        name: "previewMyProject",
        params: {id: row.id}
    })
    window.open(href, "_blank")
}
const upNoProject = row => {
    upNoProjectApi(row.id).then(async () => {
        ElMessage.success("审核驳回成功")
        await getHostProjectList()
        emits("reload")
    })
}
const upOkProject = row => {
    upOkProjectApi(row.id).then(async () => {
        ElMessage.success("审核通过成功")
        await getHostProjectList()
        emits("reload")
    })
}
//日期格式化
const formattedDate = row => {
    if(!row.startTime) return ""
    const date = new Date(row.startTime)
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`
}
onMounted(() => {
    getHostProjectList()

})
</script>

<style scoped lang="scss">
.list{
    margin-bottom: 1em;
}

</style>

